<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="收货地址"></commonTitle>
		</view>
		<view class="save-address" @tap="saveAddress">保存</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<view class="user-info-item">
				<input class="item-title" placeholder="收货人" v-model="userAddress.receiver"/>
				<view class="item-right">
					<image src="../../../static/common/icon-contact.png" class="question-icon"></image>
				</view>
			</view>
			
			<view class="user-info-item">
				<input class="item-title" placeholder="手机号" v-model="userAddress.receiverPhone"/>
				<view class="item-right">
					<view class="user-text2">+86 ></view>
				</view>
			</view>
			
			<view class="user-info-item">
				<view class="item-title" style="color: #808080;">所在地区</view>
				<view class="item-right">
					<view class="user-text2">
						<pickerAddress @change="change">{{txt}}</pickerAddress>
					</view>
				</view>
			</view>
			
			<view class="user-info-item address-detaily">
				<textarea class="addres-detail-text" 
				v-model="userAddress.address"
				placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等"></textarea>
			</view>
		</view>
		
	</view>
	</view>
</template>

<script>
	import commonTitle from'../../../components/titile/title.vue'
	import pickerAddress from '../../../components/wangding-pickerAddress/wangding-pickerAddress.vue'
	export default{
		components:{
			commonTitle,
			pickerAddress
		},
		data () {
			return {
				apptoken:"",
				txt: '选择地址',
				userAddress:""
			}
		},
		onLoad(option) {
			
			this.userAddress = uni.getStorageSync("userAddress");
			if(this.userAddress.sprovince){
				this.txt = this.userAddress.sprovince + this.userAddress.scity + this.userAddress.sarea;
			}
			
			this.apptoken = uni.getStorageSync("apptoken");
		},
		methods: {
			change(data) {
				//console.log(data)
				this.userAddress.sprovince = data.data[0];
				this.userAddress.scity = data.data[1];
				this.userAddress.sarea = data.data[2];
				this.txt = data.data.join('')
				//console.log(data.data.join(''))
			},
			saveAddress(){
				//保存地址
				if(!this.userAddress.receiver){
					this.$CommonJS.showToast("请填写收货人");
					return;
				}
				if(!this.userAddress.receiverPhone){
					this.$CommonJS.showToast("请填写手机号");
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.userAddress.receiverPhone))){
					this.$CommonJS.showToast("手机号格式不正确");
					return;
				}
				if(!this.userAddress.sprovince){
					this.$CommonJS.showToast("请选择省市区");
					return;
				}
				if(!this.userAddress.address){
					this.$CommonJS.showToast("请填写详细地址");
					return;
				}
				
				const _this = this;
				this.userAddress.apptoken = this.apptoken;
				//console.log(this.userAddress);
				uni.request({
					url:this.$API.URL + this.$API.updateAdress,
					data:this.userAddress,
					success(res) {
						console.log(res);
						if(res.data.success){
						console.log(_this.userAddress)
							uni.setStorage({
								key:"userAddress",
								data:_this.userAddress,
								success() {
									uni.setStorage({
										key:"CJFAddress",
										data:_this.userAddress,
										success() {
											uni.showToast({
												title:"保存成功"
											})
										}
									})
									
								}
							})
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			}
		}
		
	}
</script>

<style>
	@import url("sub-address.css");
</style>
